<template>
  <div class="order-list">
    <div class="el-header">
      <el-menu router background-color="#eee" text-color="#303133" class="el-menu-demo" mode="horizontal">
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item>订单列表</el-menu-item>
      </el-menu>
    </div>
    <div class="order-conter">
      <el-tag>订单管理</el-tag>
      <!-- $router.back() -->
      <el-badge class="item">
        <el-button @click="$emit('close')" type="primary" size="small">返回</el-button>
      </el-badge>
      <!-- 表单查询 -->
      <div class="order-from">
        <el-form :model="ruleForm" :inline="true" :ref="ruleForm" :rules="rules" label-width="120px" class="demo-form">
          <el-form-item label="商户ID/名称:" prop="name">
            <el-input v-model="ruleForm.name" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="订单号：" prop="orderids">
            <el-input v-model.number="ruleForm.orderids" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="配送方式：" prop="region">
            <el-select v-model="ruleForm.region" placeholder="全部" size="mini">
              <el-option label="到店自提" value="shanghai"></el-option>
              <el-option label="同城配送" value="beijing"></el-option>
              <el-option label="跨城配送" value="cs"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下单日期">
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker type="date" size="mini" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="1">至</el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-date-picker type="date" size="mini" placeholder="选择日期" v-model="ruleForm.date2" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="手机号：" prop="mobile">
            <el-input v-model.number="ruleForm.mobile" size="mini"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryList(ruleForm)" size="medium">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="resetForm(ruleForm)">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表单列表 -->
      <div class="order-data">
        <div class="order-message">
          <el-badge class="item">
            <el-button size="small" @click="this.getOrderList">全部</el-button>
          </el-badge>
          <el-badge :value="zfvalue" class="item" :hidden="zfvalue == 0 ? true : false">
            <el-button v-model="tableData" size="small" @click="get(0)">待支付</el-button>
          </el-badge>
          <el-badge :value="ztvalue" class="item" type="primary" :hidden="ztvalue == 0 ? true : false">
            <el-button size="small" @click="get(1)">待自提</el-button>
          </el-badge>
          <el-badge :value="psvalue" class="item" type="warning" :hidden="psvalue == 0 ? true : false">
            <el-button size="small" @click="get(2)">待配送</el-button>
          </el-badge>
          <el-badge :value="fhvalue" :hidden="fhvalue == 0 ? true : false" class="item" type="warning"> <el-button size="small" @click="get(4)">待发货</el-button> </el-badge>
          <el-badge :value="yfhvalue" :hidden="yfhvalue == 0 ? true : false" class="item" type="warning"> <el-button size="small" @click="get(5)">已发货</el-button> </el-badge>
          <el-badge :value="shvalue" :hidden="shvalue == 0 ? true : false" class="item" type="warning"> <el-button size="small" @click="get(3)">已收货</el-button> </el-badge
          ><el-badge :value="tkvalue" :hidden="tkvalue == 0 ? true : false" class="item" type="warning"> <el-button size="small" @click="get(6)">售后退款</el-button> </el-badge
          ><el-badge :value="qxvalue" :hidden="qxvalue == 0 ? true : false" class="item" type="warning">
            <el-button size="small" @click="get(7)">已取消</el-button>
          </el-badge>
        </div>
        <el-table :data="tableData" style="width: 100%" height="500" stripe>
          <el-table-column prop="merchants" label="商户ID" width="70px"> </el-table-column>
          <el-table-column prop="merchant_name" label="商户名称" width="80px"> </el-table-column>
          <el-table-column prop="order_id" label="订单号" width="70px"> </el-table-column>
          <el-table-column prop="merchant_list" label="商品列表" width="200px">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.merchant_list" :key="index">
                <el-tag>{{ item.o }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="merchant_times" label="下单时间"> </el-table-column>
          <el-table-column prop="merchant_total" label="订单总金额"> </el-table-column>
          <el-table-column prop="merchant_mode[0]" label="配送方式"> </el-table-column>
          <el-table-column prop="merchant_address" label="收货地址/提货人">
            <template slot-scope="scope">
              <span>提货人:</span>
              <span>{{ scope.row.merchant_address[0] }}</span>
              <br />
              <span>收货地址:</span>
              <br />
              <span>{{ scope.row.merchant_address[1] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="merchant_state" label="订单状态" width="120"> </el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <div v-if="scope.row.state === 3">
                <el-button round type="primary" size="mini" @click="getUserlist(scope.row)">查看订单</el-button>
              </div>
              <div v-else-if="scope.row.state === 0">
                <el-button round type="primary" size="mini" @click="getUserlist(scope.row)">查看订单</el-button>
                <el-button class="margin" round type="primary" size="mini" @click="cancelOrder(scope.row)">取消订单</el-button>
              </div>
              <div v-else-if="scope.row.state === 1">
                <el-button round type="primary" size="mini" @click="getUserlist(scope.row)">查看订单</el-button>
                <el-button class="margin" round type="primary" size="mini" @click="cancelOrder(scope.row)">取消订单</el-button>
                <el-button class="margin" round type="primary" size="mini" @click="cancelOrder(scope.row)">确认提货</el-button>
              </div>
              <div v-else-if="scope.row.state === 2">
                <el-button round type="primary" size="mini" @click="getUserlist(scope.row)">查看订单</el-button>
                <el-button class="margin" round type="primary" size="mini" @click="cancelOrder(scope.row)">取消订单</el-button>
                <el-button class="margin" round type="primary" size="mini" @click="cancelOrder(scope.row)">确认配送</el-button>
              </div>
              <div v-else-if="scope.row.state === 6">
                <el-button round type="primary" size="mini" @click="getUserlist(scope.row)">查看订单</el-button>
                <el-button class="margin" round type="primary" size="mini" @click="cancelOrder(scope.row)">确认退款</el-button>
              </div>
              <div v-else-if="scope.row.state === 5">
                <el-button round type="primary" size="mini" @click="getUserlist(scope.row)">查看订单</el-button>
                <el-button class="margin" round type="primary" size="mini" @click="cancelOrder(scope.row)">取消订单</el-button>
                <el-button class="margin" round type="primary" size="mini" @click="isInvoice = true">查看发货单</el-button>
              </div>
              <div v-else-if="scope.row.state === 4">
                <el-button round type="primary" size="mini" @click="getUserlist(scope.row)">查看订单</el-button>
                <el-button class="margin" round type="primary" size="mini" @click="cancelOrder(scope.row)">取消订单</el-button>
                <el-button class="margin" round type="primary" size="mini" @click="cancelOrder(scope.row)">确认发货</el-button>
              </div>
              <div v-else-if="scope.row.state === 7">
                <el-button round type="primary" size="mini" @click="getUserlist(scope.row)">查看订单</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page="queryInfo.pagenum"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[1, 3, 5, 15]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 订单详情框 -->
    <el-dialog title="订单详情" :visible.sync="orderFlag" width="45%">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>商户ID: {{ inttituteList.merchants }}</span>
          <br />
          <br />
          <span>店铺名称:{{ inttituteList.merchant_name }}</span>
          <br />
          <br />
          <div class="order_span">
            <span>订单号:{{ inttituteList.order_id }}</span
            >&nbsp;&nbsp; <span>支付时间: {{ inttituteList.merchant_times }}</span> &nbsp;&nbsp; <span>{{ inttituteList.merchant_state }}</span>
          </div>
          <br />
          <span>配送方式: {{ inttituteList.merchant_mode && inttituteList.merchant_mode[0] }}</span>
          <br />
          <br />
          <span>联系人: {{ inttituteList.merchant_mode && inttituteList.merchant_address[0] }}</span
          >&nbsp;&nbsp;&nbsp;<span>联系电话: {{ inttituteList.merchant_mode && inttituteList.merchant_address[2] }}</span>
          <br />
          <span>收货地址: {{ inttituteList.merchant_mode && inttituteList.merchant_address[1] }}</span>
          <br />
        </div>
        <el-table :data="inttituteList.merchant_list" height="260" border style="width: 100%">
          <el-table-column label="选购商品">
            <template slot-scope="scope">
              <div class="text item order-lists">
                <img class="imgsize" :src="scope.row.m" title="1" /><el-tag>{{ scope.row.o }}</el-tag> <span>￥: {{ scope.row.i }}</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- <div v-for="o in inttituteList.merchant_list" :key="o" class="text item order-lists">
          <img class="imgsize" src="" title="1" /><el-tag>{{ o.o }}</el-tag> <span >￥: {{ o.i}}</span>
        </div> -->
        <br />
        <div>
          <span>包装:</span><span style="float:right;"> ￥:{{ inttituteList.packing }}</span>
          <br />
          <br />
          <span>活动优惠:</span
          ><span style="float:right;"
            >{{ inttituteList.merchant_mode && inttituteList.discount[0] }}<span> ￥:{{ inttituteList.merchant_mode && inttituteList.discount[1] }}</span></span
          >
          <br />
          <br />
          <span>优惠劵:</span
          ><span style="float:right;"
            ><span>{{ inttituteList.merchant_mode && inttituteList.coupon[0] }}</span> ￥:{{ inttituteList.merchant_mode && inttituteList.coupon[1] }}</span
          >
          <br />
          <br />
          <span>配送费:</span
          ><span style="float:right;"
            ><span>{{ inttituteList.merchant_mode && inttituteList.merchant_mode[0] }}</span> ￥:{{ inttituteList.merchant_mode && inttituteList.merchant_mode[1] }}</span
          >
        </div>
        <div style="float:right;">
          <h3>合计 ￥: {{ inttituteList.merchant_total }}元</h3>
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="orderFlag = false">取 消</el-button>
        <el-button type="primary" @click="orderFlag = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 发货单 -->
    <el-dialog title="发货单" :visible.sync="isInvoice" width="30%">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>物流信息</span>
        </div>
        <el-timeline :reverse="reverse">
          <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.ftime">
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isInvoice = false">取 消</el-button>
        <el-button type="primary" @click="isInvoice = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'orderList',
  props: {
    id: {
      type: Number,
      default: 0
    },
    refundnumbers: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 子组件开关
      condition: false,
      // 发货单
      isInvoice: false,
      orderFlag: false,
      reverse: true,
      activities: [
        {
          // ftime: '2018-05-10 09:39:00',
          // content: '已签收,感谢使用顺丰,期待再次为您服务'
        },
        {
          ftime: '2018-05-10 08:23:00',
          content: '[长沙市]长沙高新小区营业点派件员 顺丰速运 95338正在为您派件'
        },
        {
          ftime: '2018-05-10 07:32:00',
          content: '快件到达 [长沙高新小区营业点]'
        },
        {
          ftime: '2018-05-10 02:03:00',
          content: '快件在[长沙高新顺义集散中心]已装车,准备发往 [长沙高新小区营业点]'
        },
        {
          ftime: '2018-05-09 23:05:00',
          content: '快件到达 [长沙高新顺义集散中心]'
        },
        {
          ftime: '2018-05-09 21:21:00',
          content: '快件在[长沙高新营业点]已装车,准备发往 [长沙高新顺义集散中心]'
        },
        {
          ftime: '2018-05-09 13:07:00',
          content: '顺丰速运 已收取快件'
        }
      ],
      zfvalue: 0,
      ztvalue: 0,
      psvalue: 0,
      fhvalue: 0,
      shvalue: 0,
      tkvalue: 0,
      qxvalue: 0,
      yfhvalue: 0,
      ruleForm: {
        name: '',
        date1: '',
        date2: '',
        region: '',
        mobile: '',
        orderids: ''
      },
      queryInfo: {
        pagenum: 2,
        pagesize: 10
      },
      total: 0,
      rules: {
        name: [{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
        mobile: [{ min: 11, max: 11, message: '请输入正确手机号', trigger: 'blur' }],
        orderids: [{ type: 'number', message: '请输入正确订单号', trigger: 'blur' }],
        date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
        date2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }],
        region: [{ message: '请选择活动区域', trigger: 'change' }]
      },
      currentPage4: 4,
      tableData: [],
      inttituteList: {}
    }
  },
  created() {
    this.getOrderList()
  },
  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    // 页面改变函数
    async getpage() {
      const { data } = await this.$http.get(`/orderList/?_page${this.queryInfo.pagenum}&_limit=${this.queryInfo.pagesize}`)
      this.tableData = data
    },
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      this.getpage(val)
    },
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val
      this.getpage(val)
    },
    // 获取函数
    async getOrderList() {
      const { data } = await this.$http.get('/orderList')
      this.tableData = data
    },
    // 查看订单
    async getUserlist(event) {
      this.orderFlag = true
      const { data: res } = await this.$http.get(`/orderList/${event.id}`)
      this.inttituteList = res
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.getOrderList()
    },
    // 订单详情查询
    async queryList(form) {
      const { data } = await this.$http.get(`/orderList/?order_id=${form.orderids}`)
      this.tableData = data
    },
    // 订单类别查询
    async get(state) {
      const { data } = await this.$http.get(`/orderList/?state=${state}`)
      this.tableData = data
    },
    // 修改订单状态
    async cancelOrder(event) {
      if (event.state === 0 || event.state === 6) {
        event.state = 7
        event.merchant_state = '已取消'
      } else if (event.state === 1) {
        event.state = 3
        event.merchant_state = '已收货'
      } else if (event.state === 2 || event.state === 4) {
        event.state = 5
        event.merchant_state = '已发货'
      }
      // console.log(event)
      await this.$http.put(`/orderList/${event.id}`, event)
      this.get(event.state)
    },
    // 查看当前店铺订单
    async noworder() {
      const { data } = await this.$http.get(`/orderList/?merchants=${this.id}`)
      this.tableData = data
    },
    //  c查看退款
    async refundnumber() {
      // console.log(this.refundnumbers)
      const { data } = await this.$http.get(`/orderList/?merchants=${this.id}&state=${this.refundnumbers}`)
      this.tableData = data
    }
  },

  watch: {
    tableData: {
      handler() {
        this.total = this.tableData.length
        this.zfvalue = 0
        this.ztvalue = 0
        this.psvalue = 0
        this.fhvalue = 0
        this.shvalue = 0
        this.tkvalue = 0
        this.qxvalue = 0
        this.yfhvalue = 0
        this.tableData.forEach(item => {
          if (item.state === 0) {
            return this.zfvalue++
          } else if (item.state === 1) {
            return this.ztvalue++
          } else if (item.state === 2) {
            return this.psvalue++
          } else if (item.state === 3) {
            return this.shvalue++
          } else if (item.state === 4) {
            return this.fhvalue++
          } else if (item.state === 6) {
            return this.tkvalue++
          } else if (item.state === 7) {
            return this.qxvalue++
          } else if (item.state === 5) {
            return this.yfhvalue++
          }
        })
      },
      immediate: true
    }
  }
}
</script>
<style lang="less" scoped>
.order-list {
  .order-lists {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /deep/ .imgsize {
      width: 60px;
      height: 60px;
    }
  }
  .margin{
    margin-top: 10px;
  }
  .order_span {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  width: 100%;

  .el-header {
    padding: 0;
  }
  .order-conter {
    .el-tag {
      margin: 10px 10px;
    }
    /deep/ .order-from {
      width: 1330px;
      height: 140px;
      padding: 20px 0;
      border: 1px solid #001;
      margin: 0 18px;
      border-radius: 20px;
      .el-form {
        margin-top: 20px;
      }
      .el-col-1 {
        text-align: center;
      }
      .el-picker-panel {
        top: 220px !important;
      }
    }
  }
  .order-data {
    margin: 18px;
    border: 1px solid #001;
    .order-message {
      margin: 20px;
      .item {
        margin-top: 10px;
        margin-right: 10px;
      }
    }
    .el-button + .el-button {
      margin-left: 0;
    }
    .block {
      text-align: center;
    }
  }
}
</style>
